<template>
  <div class="table-data-view" v-loading='tableLoading'>
    <div class="common-screen-view">
      <div class="common-screen-cell">
        <!-- <div class="common-screen-title" style="width:80px">日志时间：</div> -->
          <el-date-picker
            v-model="dates"
            type="daterange"
            range-separator="-"
            :start-placeholder="$t('user_management.start_time')"
            :end-placeholder="$t('user_management.end_time')"
            value-format="yyyy-MM-dd">
          </el-date-picker>
      </div>
      <div class="common-screen-cell">
        <!-- <div class="common-screen-title"  style="width:65px">名称：</div> -->
        <el-input v-model="logName" :placeholder="$t('tables_title.name')"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchLog">{{$t('global.search')}}</el-button>
      <el-button type="primary" icon="el-icon-folder-opened" v-if="checkPerm('log_clean')" @click="clearLog">{{$t('global.clear_log')}}</el-button>
    </div>
    <table-list class="table-list-view" :tableConfig="tableConfig" :tableData="tableData"></table-list>
    <table-pagination
      :total="count"
      :currentPage="pageNow"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange">
    </table-pagination>
  </div>
</template>

<script>

import { checkPermission } from '@/common/utils/permission.js'
import { getLoginLogList,deleteLoginLog } from '@/api/loginLogApi.js'

export default {
  data(){
    return{
      tableLoading:false,
      dates:[],
      logName:'',
      beginTime:'',
      endTime:'',
      pageNow:1,
      pageSize:10,
      tableConfig:{},       //table的基本配置
      tableData:[],         //table数据源
      count: 0,             //数据总数
    }
  },
  components:{
    tableList: () => import("@/components/common_tables.vue"),            //引入table组件
    tablePagination: () => import("@/components/table_pagination.vue"),    //引入页码组件   为方便拓展 把它与table组件分开封装
  },
  created(){
    this.tableConfig = {
      isCheckBox:true,
      props:[
        { type: "text", label: "tables_title.log_name", prop: "logName",width:220},
        { type: "text", label: "tables_title.user_name", prop: "userName",width:220},
        { type: "text", label: "tables_title.create_time", prop: "createTime",width:220},
        { type: "text", label: "tables_title.remarks", prop: "regularMessage"},
        { type: "text", label: "ip", prop: "ipAddress",width:220},
      ],
      isOpt:false,
    }
    this.getList()
  },
  methods:{
    searchLog(){
      this.pageNow = 1
      if(this.dates != null && this.dates.length > 1){
        this.beginTime = this.dates[0]
        this.endTime = this.dates[1]
      }else{
        this.beginTime = ''
        this.endTime = ''
      }
      this.getList()
    },
    getList(){
      this.tableLoading = true
      getLoginLogList({
        logName:this.logName,
        beginTime:this.beginTime,
        endTime:this.endTime,
        page:this.pageNow,
        logType:0,
        limit:this.pageSize
      }).then((res)=>{
        this.tableLoading = false
        if(res.status == 200){
          this.count = res.data.count
          this.tableData = res.data.data
        }else{
          this.$message.error(res.data.message)
        }
      }).catch((e)=>{
        this.tableLoading = false
      })
    },
    checkPerm(code){        //校验权限
      return checkPermission(code)
    },
    handleSizeChange(val){      //修改每页的显示条数
      this.pageSize = val
      this.pageNow = 1
      this.getList()
    },
    handleCurrentChange(val){   //切换当前页码
      this.pageNow = val
      this.getList()
    },
    clearLog(){
      this.$confirm('您确定要清空登录日志吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteLoginLog().then((res)=>{
          if(res.data.code == 200){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getList()
          }else{
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {

      });
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
